<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <th:block th:include="common/common_head :: commonHeader('新增资源')"/>
    <style type="text/css">
        .ico-list .fa{
            margin: 5px;
            padding: 5px;
            cursor:pointer;
            font-size: 18px;
            width: 40px;
            border-radius: 3px;
        }
        .ico-list .fa:hover {
            background-color: #1d9d74;
            color: #ffffff;}
    </style>
</head>

<body class="gray-bg">

<div class="wrapper wrapper-content animated fadeInRight">
    <form class="form-horizontal" method="post" th:action="@{/sys/menu/save}" id="menuForm">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <div class="form-group">
                            <label class="col-sm-3 control-label"><span class="required-sign">*</span>资源名称：</label>
                            <div class="col-sm-7">
                                <input name="name" type="text" placeholder="资源名称" class="form-control">
                            </div>
                        </div>
                        <div class="form-group" id="iconDiv">
                            <label class="col-sm-3 control-label">图标：</label>
                            <div class="col-sm-7">
                                <input id="icon" name="icon" type="text" placeholder="图标" class="form-control" autocomplete="off">
                                <div class="ms-parent" style="width: 100%;">
                                    <div class="icon-drop animated flipInX" style="display: none;max-height:200px;overflow-y:auto">
                                        <th:block th:include="modules/sys/menu/icon :: icon"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label"><span class="required-sign">*</span>类型：</label>
                            <div class="col-sm-7">
                                <label class="radio-inline i-checks" name="typeLab">
                                    <input type="radio" value="0" name="type" checked=""> <i></i> 目录</label>
                                <label class="radio-inline i-checks" name="typeLab">
                                    <input type="radio" value="1" name="type"> <i></i> 菜单</label>
                                <label class="radio-inline i-checks" name="typeLab">
                                    <input type="radio" value="2" name="type"> <i></i> 按钮</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label"><span class="required-sign">*</span>上级资源：</label>
                            <div class="col-sm-7">
                                <input type="hidden" name="parentId" id="parentId" class="form-control"/>
                                <input onclick="addPid()" readonly="readonly" value="" type="text" name="parentName"
                                       id="parentName" placeholder="上级资源" class="form-control"/>
                            </div>
                        </div>
                        <div class="form-group" id="urlDiv">
                            <label class="col-sm-3 control-label">资源URL：</label>
                            <div class="col-sm-7">
                                <input name="url" type="text" placeholder="资源URL" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label"><span class="required-sign">*</span>资源排序码：</label>
                            <div class="col-sm-7">
                                <input name="orderNum" type="text" placeholder="资源排序码" class="form-control" autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group" id="permsDiv">
                            <label class="col-sm-3 control-label">授权标识：</label>
                            <div class="col-sm-7">
                                <input name="perms" type="text" placeholder="多个用逗号隔开，如：user:list,user:create"
                                       class="form-control">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-offset-3 col-sm-7">
                                <input class="btn btn-primary" type="submit" value="保存">
                                <button class="btn btn-primary" type="button" onclick="Dialog.closeFrame(window.name)">取 消</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<!--引入公共js-->
<div th:include="common/onload_js :: onloadJS"></div>
<!-- Chosen -->
<script th:src="@{/static/js/plugins/chosen/chosen.jquery.js}"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    	$('#icon').focus(function() {
            $(".icon-drop").show();
        });
        $(".icon-drop").find(".ico-list i").on("click",
            function() {
                $('#icon').val($(this).attr('class'));
                // $(".icon-drop").hide();
            }
        );
        $("#menuForm").click(function(event) {
            var obj = event.srcElement || event.target;
            if (!$(obj).is("input[name='icon']")) {
                $(".icon-drop").hide();
            }
        });

        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
        $("label[name='typeLab']").on("click", function () {
            changeType()
        })
        $(".iCheck-helper").on("click", function () {
            changeType()
        })
        changeType()
    });

    function changeType() {
        var type= $("input[name='type']:checked").val();
        allShow()
        if (type == '0'){
            $("input[name='url']").val("");
            $("#urlDiv").hide();
            $("input[name='perms']").val("")
            $("#permsDiv").hide();
        }
        if (type == '1'){
            $("input[name='perms']").val("");
            $("#permsDiv").hide();
            $("input[name='icon']").val("");
            $("#iconDiv").hide()
        }
        if (type == '2'){
            $("input[name='icon']").val("");
            $("#iconDiv").hide()
            $("input[name='url']").val("");
            $("#urlDiv").hide();
        }
    }
    function allShow() {
        $("#urlDiv").show();
        $("#permsDiv").show();
        $("#iconDiv").show()
    }

    Page.validateForm("#menuForm",{
        tips:"确定保存资源信息？",
        debug: false,
        rules: {
            name: {
              required: true
            }
        },
        messages: {
            name: {
             required: "名称不能为空"
             }
        },
        submitSuccess:function(data){
            Dialog.msg("新建成功!",function(){
                parent.reloadTable();
                Dialog.closeFrame(window.name)
            });
        }
    });

    //弹出资源树
    function addPid() {
        Dialog.openUrl("资源列表", ctxPath+"/modules/sys/menu/menu_select.html", {area: ['300px', '400px'],shadeClose:
            true});
    }

    function toMenuId(treeNode) {

        $("#parentId").val(treeNode.menuId);
        $("#parentName").val(treeNode.name);
    }
</script>

</body>
</html>
